<template>
  <div class="right">
    <div class="BorrowingBooks" style="flex: 7">
      <!-- <div class="BorrowingBookstitle">
        <h3>各院图书借阅情况</h3>
      </div> -->
      <BorrowingBooks />
    </div>
    
    <div class="gexamination" style="flex: 4.7">
      <!-- <div class="gexaminationtitle">
        <h3>各院考研及考公</h3>
      </div> -->
      <GExamination />
    </div>
  </div>
</template>

<script>
// import Graguated from "./Graguated.vue";
import BorrowingBooks from "./Book/BorrowingBooks.vue";
import GExamination from "./GExamination.vue";

export default {
  name: "RightComponent",
  components: {
    BorrowingBooks,
    GExamination,
  },
};
</script>

<style scoped>
.right {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.BorrowingBooks,
.gexamination {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 15px;
}
.BorrowingBooks{
  flex:7;
  margin-bottom: 10px;
}
.gexamination{
  flex:2;
  margin-top: 10px;
}
.gexaminationtitle,
.BorrowingBookstitle {
  flex: 1; /* 设置标题和组件上下分布比例为1:9 */
  width:100%;
  /* background-image: url('@/assets/title.png'); */
  background-color: bisque;
  background-size: cover;
  margin-bottom : 10px;
  padding: 3px;
}
.gexaminationtitle h3,
.BorrowingBookstitle  h3{
  text-align: left;
  margin-left: 30px;
  font-size: 20px;
}
</style>
